<!-- 商圈管理 -->
<template>
	<div class="businesscircle">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>交易中心</el-breadcrumb-item>
            <el-breadcrumb-item>资产招租</el-breadcrumb-item>
            <el-breadcrumb-item>商圈管理</el-breadcrumb-item>
        </el-breadcrumb>
		<el-form :inline="true">
                <el-form-item label="城市：" >
                    <el-select v-model="params.cityId" @change="loadis" filterable clearable>
                        <el-option v-for="(item,index) in citys"
                                   :key="index"
                                   :label="item.city"
                                   :value="item.cityId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域：">
                    <el-select v-model="params.areaId" filterable clearable>
                        <el-option v-for="(item,index) in districts"
                                   :key="index"
                                   :label="item.area"
                                   :value="item.areaId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="fn('query')" id="monitorEnter">查询</el-button>
                    <el-button type="primary" @click="fn('add')">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border stripe v-loading="tableLoading">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column label="省份" prop="provinceName"></el-table-column>
                <el-table-column label="城市" prop="cityName"></el-table-column>
                <el-table-column label="城市代号" prop="cityId"></el-table-column>
                <el-table-column label="区/县" prop="areaName"></el-table-column>
                <el-table-column label="区代号" prop="areaId"></el-table-column>
                <el-table-column label="商圈" prop="tradingArea"></el-table-column>
                <el-table-column label="商圈代号" prop="tradingCode"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="fn('edit',scope.row.id)">编辑</el-button>
                        <el-button type="text" size="small" @click="fn('del',scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :current-page="params.pageNum"
		            :page-sizes="[10, 20, 40, 50]"
		            :page-size="params.pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="total" style="margin-top:30px;">
		    </el-pagination>
		    <el-dialog title="新增" :visible.sync="centerDialogVisible" width="30%" center :modal-append-to-body="false">
		        <el-form :model="newparams" label-width="120px" :rules="rules" ref="newForm">
		            <el-form-item label="省份：" prop="provinceId">
		                <el-select v-model="newparams.provinceId" @change="newloadCity" filterable clearable>
		                    <el-option v-for="(item,index) in province"
		                               :key="index"
		                               :label="item.province"
		                               :value="item.provinceid">
		                    </el-option>
		                </el-select>
		            </el-form-item>
		            <el-form-item label="城市：" prop="cityId">
		                <el-select v-model="newparams.cityId" @change="newloadDis" filterable clearable>
		                    <el-option v-for="(item,index) in newcitys"
		                               :key="index"
		                               :label="item.city"
		                               :value="item.cityId">
		                    </el-option>
		                </el-select>
		            </el-form-item>
		            <el-form-item label="城市代号：" class="cityordis">
		                <el-input v-model="newparams.cityId" style="display: inline-block;width: 217px;" :disabled="true" class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="区县：" prop="areaId">
		                <el-select v-model="newparams.areaId" @change="newloadArea" filterable>
		                    <el-option v-for="(item,index) in newdistricts"
		                               :key="index"
		                               :label="item.area"
		                               :value="item.areaId">
		                    </el-option>
		                </el-select>
		            </el-form-item>
		            <el-form-item label="区县代号：" class="cityordis">
		                <el-input v-model="newparams.areaId" style="display: inline-block;width: 217px;" :disabled="true"  class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="商圈名称：" prop="tradingArea">
		                <el-input v-model="newparams.tradingArea" style="display: inline-block;width: 217px;" maxlength="30"></el-input>
		            </el-form-item>
		            <el-form-item label="商圈代号：" prop="tradingCode">
		                <el-input v-model="newparams.tradingCode " style="display: inline-block;width: 217px;" maxlength="20"></el-input>
		            </el-form-item>
		        </el-form>
		        <span slot="footer" class="dialog-footer">
		            <el-button type="primary" @click="save" :loading="loading">保 存</el-button>
		            <el-button @click="centerDialogVisible = false">取 消</el-button>
		        </span>
		    </el-dialog>
		    <!-- 编辑弹框 -->
		    <el-dialog title="编辑" :visible.sync="centerDialogVisible1" width="30%" center :modal-append-to-body="false">
		        <el-form :model="newparams" label-width="120px" :rules="rules" ref="newForm1">
		            <el-form-item label="省份：" class="cityordis">
		                <el-input v-model="newparams.provinceName" style="display: inline-block;width: 217px;" :disabled="true"  class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="城市：" class="cityordis">
		                <el-input v-model="newparams.cityName" style="display: inline-block;width: 217px;" :disabled="true"  class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="城市代号：" class="cityordis">
		                <el-input v-model="newparams.cityId" style="display: inline-block;width: 217px;" :disabled="true" class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="区县：" class="cityordis">
		                <el-input v-model="newparams.areaName" style="display: inline-block;width: 217px;" :disabled="true"  class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="区县代号：" class="cityordis">
		                <el-input v-model="newparams.areaId" style="display: inline-block;width: 217px;" :disabled="true"  class="disabl"></el-input>
		            </el-form-item>
		            <el-form-item label="商圈名称：" prop="tradingArea">
		                <el-input v-model="newparams.tradingArea" style="display: inline-block;width: 217px;" maxlength="30"></el-input>
		            </el-form-item>
		            <el-form-item label="商圈代号：" prop="tradingCode">
		                <el-input v-model="newparams.tradingCode " style="display: inline-block;width: 217px;" maxlength="20"></el-input>
		            </el-form-item>
		        </el-form>
		        <span slot="footer" class="dialog-footer">
		            <el-button type="primary" @click="saveupdate" :loading="loading">保 存</el-button>
		            <el-button @click="centerDialogVisible1 = false">取 消</el-button>
		        </span>
		    </el-dialog>
	</div>
</template>

<script>
	export default {
		name:"businesscirclemanage",
		data(){
			return {
				tableData: [],
		        centerDialogVisible:false,
		        centerDialogVisible1:false,
		        citys:[],
		        province:[],
		        districts:[],
		        newcitys:[],
		        hoststring:"",
		        loading:false,
		        newdistricts:[],
		        params:{
		            cityId:"",
		            areaId:"",
		            pageNum: 1,
		            pageSize:10
		        },
		        newparams:{
		            id:"",
		            provinceId:"",
		            provinceName:"",
		            cityId:"",
		            cityName :"",
		            areaId:"",
		            areaName:"",
		            tradingArea:"",
		            tradingCode:""
		        },
		        tableLoading: false,
		        total:0,
		        rules:{
		            provinceId:[{required: true,message: '请选择省份', trigger: 'change'}],
		            cityId:[{required: true,message: '请选择城市', trigger: 'change'}],
		            areaId:[{required: true,message: '请选择区县', trigger: 'change'}],
		            tradingArea:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请输入商圈名称'));
		                    }
		                    let reg = new RegExp("[`~!@#$^&*()=|_{}':;',\\[\\].<>/?~！@#￥……&*（） --——|{}【】‘；：”“'。，、？]");
		                    if (reg.test(value)) {
		                        return callback(new Error('请输入正确的商圈名称'));
		                    }
		                    callback();
		                }
		            }],
		            tradingCode:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请输入商圈代号'));
		                    }
		                    let reg = new RegExp("[`~!@#$^&*()=|_{}':;',\\[\\].<>/?~！@#￥……&*（） --——|{}【】‘；：”“'。，、？]");
		                    if (reg.test(value)) {
		                        return callback(new Error('请输入正确的商圈代号'));
		                    }
		                    callback();
		                }
		            }]
		        }
			}
		},
		methods:{
			fn(type,id){
	            if(type=="add"){
	                this.centerDialogVisible=true;
	                this.$nextTick(() => {
	                    this.$refs['newForm'].resetFields();
	                })
	                this.loadProvince();
	            }else if(type=="query"){
	                this.params.pageNum=1;
	                this.loadData();
	            }else if(type=="del"){
	                this.$confirm('确认删除吗？', '提示', {
	                    confirmButtonText: '确定',
	                    cancelButtonText: '取消',
	                    type: 'warning'
	                }). then(()=>{
	                	let formData=new FormData();
	                	formData.set("id",id);
	                    this.$axios.post(`/tenement/trading/delete`, formData).then((res)=>{
	                        this.$alert('删除成功', '提示', {
                                confirmButtonText: '确定',
                                type: 'success',
                                callback: action => {
                                    this.loadData();
                                }
                            });
	                    })
	                }).catch((error)=>{
	                	console.log(error);
	                })
	            }else if(type=="edit"){
	            	let formData=new FormData();
	                	formData.set("id",id);
	                this.centerDialogVisible1=true;
	                this.$axios.post(`/tenement/trading/selectById`, formData).then((res)=>{
	                    this.newparams=res;
	                })
	            }
	        },
	        pushTerminal(row,col,value){
	            if(row.pushTerminal==0){
	                return "经纪人app"
	            }
	            if(row.pushTerminal==1){
	                return "好生活-好房"
	            }
	            if(row.pushTerminal==2){
	                return "管家端app"
	            }
	        },
	        loadData() {
	        	let formData=new FormData();
	        	formData.set("pageNum",this.params.pageNum);
	        	formData.set("pageSize",this.params.pageSize);
	        	formData.set("areaId",this.params.areaId);
	        	formData.set("cityId",this.params.cityId);
	            this.tableLoading = true
	            this.$axios.post(`/tenement/trading/list`, formData).then((res) => {
	            	this.tableLoading = false;
                    this.tableData=res.list;
                    this.total=res.total;
	            });
	        },
	        loadProvince(){
	            this.$axios.get(`/city/provinces`).then((res) => {
                    this.province=res;
	            });
	        },
	        loadCity(){
	            this.$axios.post(`/city/cityList`).then((res) => {
	                this.citys=res.cityList;
	            });
	        },
	        loadis(){
	            this.params.areaId=""
	            if(this.params.cityId != ""){
	                this.$axios.get(`/city/cityAreaList/${this.params.cityId}`).then((res) => {
	                    this.districts=res.cityArealist;
	                });
	            }else{
	                this.params.areaId=""
	                this.districts=[];
	            }

	        },
	        newloadCity(val){
	            let obj = {};
	            this.newparams.cityId=""
	            this.newparams.areaId=""
	            this.newcitys=[];
	            this.newdistricts=[];
	            if(this.newparams.provinceId !== ""){
	                this.$axios.get(`/city/cityList/${this.newparams.provinceId}`).then((res) => {
	                	this.newcitys=res.cityList;
	                });
	                obj = this.province.find((item)=>{
	                    return item.provinceid === val;
	                });
	                this.newparams.provinceName=obj.province
	            }else{
	                this.newparams.cityId="";
	                this.newparams.areaId="";
	                this.newcitys=[];
	                this.newdistricts=[];
	            }
	        },
	        newloadDis(val){
	            let obj = {};
	            this.newparams.areaId="";
	            if(this.newparams.cityId != ""){
	                this.$axios.get(`/city/cityAreaList/${this.newparams.cityId}`).then((res) => {
	                    this.newdistricts=res.cityArealist;
	                });
	                obj = this.newcitys.find((item)=>{
	                    return item.cityId === val;
	                });
	                this.newparams.cityName=obj.city
	            }else{
	                this.newparams.areaId="";
	                this.newdistricts=[];
	            }
	        },
	        newloadArea(val){
	            let obj = {};
	            obj = this.newdistricts.find((item)=>{
	                return item.areaId === val;
	            });
	            this.newparams.areaName=obj.area
	        },
	        save(){
	            this.$refs['newForm'].validate((valid)=>{
	                if(!valid){
	                    return
	                }
	                this.loading=true;
	                this.$axios.post('/tenement/trading/add',this.newparams).then((res)=>{
	                	console.log(res);
	                    this.$alert('操作成功', '提示', {
                            confirmButtonText: '确定',
                            type: 'success',
                            callback: action => {
                                this.loading=false;
                                this.centerDialogVisible=false;
                                this.$refs['newForm'].resetFields();
                                this.loadData()
                            }
                        });
	                })
	            })
	        },
	        saveupdate(){
	            this.$refs['newForm1'].validate((valid)=>{
	                if(!valid){
	                    return
	                }
	                this.loading=true;
	                let formData=new FormData();
	                formData.set("id",this.newparams.id);
	                formData.set("tradingCode",this.newparams.tradingCode);
	                formData.set("tradingArea",this.newparams.tradingArea);
	                this.$axios.post('/tenement/trading/update',formData).then((res)=>{
	                    this.$alert('操作成功', '提示', {
                            confirmButtonText: '确定',
                            type: 'success',
                            callback: action => {
                                this.loading=false;
                                this.centerDialogVisible1=false;
                                this.$refs['newForm1'].resetFields();
                                this.loadData()
                            }
                        });
	                })
	            })
	        },
	        handleSizeChange(val) {
	            this.params.pageSize = val;
	            this.loadData();
	        },
	        handleCurrentChange(val) {
	            this.params.pageNum = val;
	            this.loadData();
	        },
		},
		created(){
			
		},
		mounted(){
			this.loadData();
	        this.loadCity();
		}
	}
</script>

<style lang="stylus">
	.businesscircle{
		.disabl .el-input__inner{
	        background-color: transparent !important;
	        color:#606266 !important;
    	}
	}
	
</style>
